<template>
	<view class="container">
		<view class="btn">
			<button @click="setData" size="mini" type="primary">存储数据</button>
	  		<button @click="getData" size="mini" type="primary">读取数据</button>
		</view>
	  	<view v-if="data.length > 0" class="data-list">
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">姓名</uni-th>
					<uni-th align="center">课程</uni-th>
					<uni-th align="center">分数</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in data" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.subject }}</uni-td>
					<uni-td align="center">{{ item.score }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>
  
<script>
  export default {
	data() {
	  return {
		data: []
	  };
	},
	methods: {
	  setData(){
		const tableData = [
		  { name: '张三', subject: '语文', score: '81' },
		  { name: '张三', subject: '数学', score: '75' },
		  { name: '李四', subject: '语文', score: '76' },
		  { name: '李四', subject: '数学', score: '90' },
		  { name: '王五', subject: '语文', score: '81' },
		  { name: '王五', subject: '数学', score: '100' },
		  { name: '王五', subject: '英语', score: '90' }
		];
		uni.setStorage({
		  key: 'tableData',
		  data: tableData,
		  success: () => {
			uni.showToast({
			  title: '数据已存储',
			  icon: 'success'
			});
		  },
		  fail: () => {
			uni.showToast({
			  title: '存储失败',
			  icon: 'none'
			});
		  }
		});
	  },
	  getData() {
		uni.getStorage({
		  key: 'tableData',
		  success: (res) => {
			this.data = res.data;
		  },
		  fail: () => {
			uni.showToast({
			  title: '没有数据',
			  icon: 'none'
			});
		  }
		});
	  }
	}
  };
</script>
  
<style scoped>
 .container {
	padding: 20px;
  }
  
  .btn{
	display: flex;
  }

  .data-list {
	margin-top: 20px;
  }
  
</style>
  